<template>
    <div>
        <!--轮播图-->
        <mt-swipe :auto="2000">
            <!--在组件中，使用v-for循环的话，一定要使用key-->
            <!--将来，谁使用这个轮播图插件，谁为我们传递 lunbotuArr-->
            <!--此时，lunbotuArr 应该是父组件向子组件传值来设置-->
            <mt-swipe-item v-for="item in lunbotuArr" :key="item.id">
                <img :src="item.img" alt="" :class="{'full': isfull}">
            </mt-swipe-item>
        </mt-swipe>
    </div>

    <!--如何让轮播图自适应-->
    <!--通过传值的方式来决定宽度或高度的自定义：定义一个属性让使用轮播图的调用者，手动指定是否为100%的宽度-->
</template>

<script>
    export default {
        name: "swiper",
        props: ['lunbotuArr', 'isfull']
    }
</script>

<style lang="scss" scoped>
    .mint-swipe {
        height: 200px;
        .mint-swipe-item {
            &:nth-child(2n+1) {
                background-color: skyblue;
            }
        }
        img {
            width: 100%;
            height: 100%;
        }
    }
    .full{
        width: 100%;
    }
</style>